<template xlang="wxml" minapp="mpvue">
  <view class="tki-qrcode">
    <!-- #ifndef MP-ALIPAY -->
    <canvas
      class="tki-qrcode-canvas"
      :canvas-id="cid"
      :style="{ width: cpSize + 'px', height: cpSize + 'px' }"
    />
    <!-- #endif -->
    <!-- #ifdef MP-ALIPAY -->
    <canvas
      :id="cid"
      :width="cpSize"
      :height="cpSize"
      class="tki-qrcode-canvas"
    />
    <!-- #endif -->
    <image
      v-show="show"
      :src="result"
      :style="{ width: cpSize + 'px', height: cpSize + 'px' }"
    />
  </view>
</template>

<script>
import QRCode from "./tki-qrcode/qrcode.js";
let qrcode;
export default {
  name: "tki-qrcode",
  props: {
    cid: {
      type: String,
      default: "tki-qrcode-canvas"
    },
    size: {
      type: Number,
      default: 200
    },
    unit: {
      type: String,
      default: "upx"
    },
    show: {
      type: Boolean,
      default: true
    },
    val: {
      type: String,
      default: ""
    },
    background: {
      type: String,
      default: "#ffffff"
    },
    foreground: {
      type: String,
      default: "#000000"
    },
    pdground: {
      type: String,
      default: "#000000"
    },
    icon: {
      type: String,
      default: ""
    },
    iconSize: {
      type: Number,
      default: 40
    },
    lv: {
      type: Number,
      default: 3
    },
    onval: {
      type: Boolean,
      default: false
    },
    loadMake: {
      type: Boolean,
      default: false
    },
    usingComponents: {
      type: Boolean,
      default: true
    },
    showLoading: {
      type: Boolean,
      default: true
    },
    loadingText: {
      type: String,
      default: "二维码生成中"
    }
  },
  data() {
    return {
      result: ""
    };
  },
  methods: {
    _makeCode() {
      let that = this;
      if (!this._empty(this.val)) {
        qrcode = new QRCode({
          context: that, // 上下文环境
          canvasId: that.cid, // canvas-id
          usingComponents: that.usingComponents, // 是否是自定义组件
          showLoading: that.showLoading, // 是否显示loading
          loadingText: that.loadingText, // loading文字
          text: that.val, // 生成内容
          size: that.cpSize, // 二维码大小
          background: that.background, // 背景色
          foreground: that.foreground, // 前景色
          pdground: that.pdground, // 定位角点颜色
          correctLevel: that.lv, // 容错级别
          image: that.icon, // 二维码图标
          imageSize: that.iconSize, // 二维码图标大小
          cbResult: function(res) {
            // 生成二维码的回调
            that._result(res);
          }
        });
      } else {
        uni.showToast({
          title: "二维码内容不能为空",
          icon: "none",
          duration: 2000
        });
      }
    },
    _clearCode() {
      this._result("");
      qrcode.clear();
    },
    _saveCode() {
      let that = this;
      if (this.result != "") {
        uni.saveImageToPhotosAlbum({
          filePath: that.result,
          success: function() {
            uni.showToast({
              title: "二维码保存成功",
              icon: "success",
              duration: 2000
            });
          }
        });
      }
    },
    _result(res) {
      this.result = res;
      this.$emit("result", res);
    },
    _empty(v) {
      let tp = typeof v,
        rt = false;
      if (tp == "number" && String(v) == "") {
        rt = true;
      } else if (tp == "undefined") {
        rt = true;
      } else if (tp == "object") {
        if (JSON.stringify(v) == "{}" || JSON.stringify(v) == "[]" || v == null)
          rt = true;
      } else if (tp == "string") {
        if (
          v == "" ||
          v == "undefined" ||
          v == "null" ||
          v == "{}" ||
          v == "[]"
        )
          rt = true;
      } else if (tp == "function") {
        rt = false;
      }
      return rt;
    }
  },
  watch: {
    size: function(n, o) {
      if (n != o && !this._empty(n)) {
        this.cSize = n;
        if (!this._empty(this.val)) {
          setTimeout(() => {
            this._makeCode();
          }, 100);
        }
      }
    },
    val: function(n, o) {
      if (this.onval) {
        if (n != o && !this._empty(n)) {
          setTimeout(() => {
            this._makeCode();
          }, 0);
        }
      }
    }
  },
  computed: {
    cpSize() {
      if (this.unit == "upx") {
        return uni.upx2px(this.size);
      } else {
        return this.size;
      }
    }
  },
  mounted: function() {
    if (this.loadMake) {
      if (!this._empty(this.val)) {
        setTimeout(() => {
          this._makeCode();
        }, 0);
      }
    }
  }
};
</script>
<style>
.tki-qrcode {
  position: relative;
}
.tki-qrcode-canvas {
  position: fixed;
  top: -99999upx;
  left: -99999upx;
  z-index: -99999;
}
</style>
